import React, {useState, useEffect} from "react";
import { Breadcrumb, Button, Form ,Input,message, Checkbox, DatePicker} from 'antd';
import { useNavigate, useParams } from 'react-router-dom';
import dayjs from "dayjs";
import { updateUser, getUserById, getUserList } from "../../service/user";

const UserEdit = ()=> {

    const [form] = Form.useForm();
    const { id } = useParams();
    const navigate = useNavigate();

    const [user, setUser] = useState({});

    useEffect(() => {
      if (id) {
        getUserById(id).then((response) => {
          const { code, result } = response.data;
          if (code === 1 && result) {
            const data = { ...result, createDate: dayjs(result.createDate), lastLogin: dayjs(result.lastLogin)};
            setUser(data);
            console.log(data);
            form.setFieldsValue(data);
          }
        });
      }
    }, []);

    const onFinish =(values)=>{
        const data = {
            ...user,
            ...values,
            createDate: values.createDate.format('YYYY-MM-DD HH:mm:ss'),
            lastLogin: values.lastLogin.format('YYYY-MM-DD HH:mm:ss')
          };
      
          updateUser(id, data).then((response) => {
            console.log(response.data);
            const { code, msg } = response.data;
            if (code === 1) {
              message.success(msg);
              navigate('/users');
            }
        });
    }

    const handleClear =()=>{
        form.resetFields();
    }

    return(
        <div className='container'>
            <Breadcrumb
            style={{
                margin: '16px 0',
            }}
            >
            <Breadcrumb.Item>权限</Breadcrumb.Item>
            <Breadcrumb.Item>用户</Breadcrumb.Item>
            <Breadcrumb.Item>修改用户</Breadcrumb.Item>
            </Breadcrumb>

            <Form form={form} onFinish={onFinish}>
                <Form.Item name="id" label="编号">
                    <Input disabled/>
                </Form.Item>
                <Form.Item name="username" label="账号">
                    <Input />
                </Form.Item>
                <Form.Item name="name" label="姓名">
                    <Input />
                </Form.Item>
                <Form.Item name="mailbox" label="邮箱">
                    <Input />
                </Form.Item>
                <Form.Item name="password" label="密码">
                    <Input type="password" />
                </Form.Item>
                <Form.Item name="createDate" label="创建时间">
                    <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" />
                </Form.Item>
                <Form.Item name="lastLogin" label="最后登录">
                    <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" />
                </Form.Item>
                <Form.Item name="ifused" label="是否启用" valuePropName="checked">
                    <Checkbox />
                </Form.Item>

                <Form.Item>
                    <Button type='primary' htmlType="submit">保存</Button>
                </Form.Item>
                <Form.Item>
                    <Button onClick={handleClear}>清空</Button>
                </Form.Item>
            </Form>

        </div>
    )
};

export default UserEdit;